<template>
  <div class="insurance-process">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">社会保险办理流程</h2>
        <div class="process-status">
          <el-tag type="info">当前步骤：{{ currentStepInfo.title }}</el-tag>
        </div>
      </div>
    </div>

    <div class="process-timeline">
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step v-for="(step, index) in processSteps" 
                 :key="index" 
                 :title="step.title"
                 :description="step.shortDesc"
                 @click.native="goToStep(index)">
          <template slot="icon">
            <i :class="step.icon"></i>
          </template>
        </el-step>
      </el-steps>

      <div class="process-content">
        <el-card class="current-step-info" shadow="hover">
          <template v-if="currentStepInfo">
            <div class="step-header">
              <h3>
                <i :class="currentStepInfo.icon"></i>
                {{ currentStepInfo.title }}
              </h3>
              <p class="description">{{ currentStepInfo.description }}</p>
            </div>
            
            <div class="step-actions">
              <el-form v-if="currentStepInfo.formItems" 
                      :model="formData"
                      :rules="rules"
                      ref="stepForm" 
                      label-width="120px"
                      class="step-form">
                <el-row :gutter="20">
                  <el-col :span="12" v-for="(item, index) in currentStepInfo.formItems" 
                         :key="index"
                         :class="{ 'full-width': item.type === 'textarea' || item.type === 'upload' }">
                    <el-form-item :label="item.label"
                                :prop="item.prop"
                                :required="item.required"
                                :class="{ 'is-required': item.required }">
                      <el-input v-if="item.type === 'input'" 
                               v-model="formData[item.prop]"
                               :type="item.inputType || 'text'"
                               :placeholder="item.placeholder">
                        <template v-if="item.unit" slot="append">{{ item.unit }}</template>
                      </el-input>
                      <el-select v-else-if="item.type === 'select'"
                                v-model="formData[item.prop]"
                                :placeholder="item.placeholder"
                                :multiple="item.multiple">
                        <el-option v-for="option in item.options"
                                 :key="option.value"
                                 :label="option.label"
                                 :value="option.value">
                        </el-option>
                      </el-select>
                      <el-date-picker v-else-if="item.type === 'date'"
                                    v-model="formData[item.prop]"
                                    :type="item.dateType || 'date'"
                                    :placeholder="item.placeholder"
                                    value-format="yyyy-MM-dd">
                      </el-date-picker>
                      <el-input v-else-if="item.type === 'textarea'"
                               type="textarea"
                               v-model="formData[item.prop]"
                               :rows="item.rows || 4"
                               :placeholder="item.placeholder">
                      </el-input>
                      <el-upload v-else-if="item.type === 'upload'"
                                class="upload-demo"
                                action="#"
                                :auto-upload="false"
                                :on-change="handleFileChange"
                                :file-list="fileList">
                        <el-button size="small" type="primary">选择文件</el-button>
                        <div slot="tip" class="el-upload__tip">{{ item.tip }}</div>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              
              <div class="step-tips" v-if="currentStepInfo.tips">
                <h4>
                  <i class="el-icon-warning-outline"></i>
                  注意事项：
                </h4>
                <ul>
                  <li v-for="(tip, index) in currentStepInfo.tips" :key="index">
                    <i class="el-icon-check"></i>
                    {{ tip }}
                  </li>
                </ul>
              </div>
              
              <div class="button-group">
                <el-button v-if="currentStep > 0" 
                          @click="prevStep"
                          icon="el-icon-arrow-left"
                          size="medium">上一步</el-button>
                <el-button type="primary" 
                          @click="nextStep"
                          :loading="submitting"
                          :disabled="!canProceed"
                          size="medium">
                  <i :class="currentStep === processSteps.length - 1 ? 'el-icon-check' : 'el-icon-arrow-right'"></i>
                  {{ currentStep === processSteps.length - 1 ? '完成' : '下一步' }}
                </el-button>
              </div>
            </div>
          </template>
        </el-card>
      </div>
    </div>

    <div class="process-progress">
      <div class="progress-info">
        <span>流程进度：</span>
        <el-progress :percentage="(currentStep + 1) / processSteps.length * 100" 
                    :format="format"
                    status="success"></el-progress>
      </div>
      <div class="step-count">
        <span>当前步骤：{{ currentStep + 1 }}/{{ processSteps.length }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SocialInsuranceProcess',
  data() {
    const validateNumber = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入数字'))
      } else if (isNaN(value)) {
        callback(new Error('请输入有效数字'))
      } else {
        callback()
      }
    }

    const validateIdCard = (rule, value, callback) => {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (!reg.test(value)) {
        callback(new Error('请输入正确的身份证号码'))
      } else {
        callback()
      }
    }

    const validatePhone = (rule, value, callback) => {
      const reg = /^1[3-9]\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }

    return {
      currentStep: 0,
      formData: {},
      fileList: [],
      submitting: false,
      rules: {
        insuranceType: [{ required: true, message: '请选择保险类型', trigger: 'change' }],
        employeeId: [{ required: true, message: '请选择参保人', trigger: 'change' }],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { validator: validateIdCard, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        baseAmount: [
          { required: true, message: '请输入基数金额', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        startDate: [{ required: true, message: '请选择起始日期', trigger: 'change' }],
        insuranceArea: [{ required: true, message: '请选择参保地区', trigger: 'change' }],
        paymentRatio: [{ required: true, message: '请选择缴费比例', trigger: 'change' }],
        approvers: [{ required: true, message: '请选择审批人', trigger: 'change' }],
        approvalOrder: [{ required: true, message: '请选择审批顺序', trigger: 'change' }]
      },
      processSteps: [
        {
          title: '基本信息',
          shortDesc: '填写基本信息',
          icon: 'el-icon-user',
          description: '填写参保人基本信息及参保类型',
          formItems: [
            {
              type: 'select',
              label: '参保人',
              prop: 'employeeId',
              placeholder: '请选择参保人',
              required: true,
              options: [
                { label: '张三 - 技术部', value: '1001' },
                { label: '李四 - 市场部', value: '1002' },
                { label: '王五 - 人事部', value: '1003' }
              ]
            },
            {
              type: 'select',
              label: '保险类型',
              prop: 'insuranceType',
              placeholder: '请选择保险类型',
              required: true,
              multiple: true,
              options: [
                { label: '养老保险', value: 'pension' },
                { label: '医疗保险', value: 'medical' },
                { label: '失业保险', value: 'unemployment' },
                { label: '工伤保险', value: 'injury' },
                { label: '生育保险', value: 'maternity' },
                { label: '住房公积金', value: 'housing_fund' }
              ]
            },
            {
              type: 'input',
              label: '身份证号',
              prop: 'idCard',
              placeholder: '请输入身份证号',
              required: true
            },
            {
              type: 'input',
              label: '联系电话',
              prop: 'phone',
              placeholder: '请输入联系电话',
              required: true
            },
            {
              type: 'input',
              label: '户籍地址',
              prop: 'address',
              placeholder: '请输入户籍地址',
              required: true
            },
            {
              type: 'select',
              label: '参保状态',
              prop: 'insuranceStatus',
              placeholder: '请选择参保状态',
              required: true,
              options: [
                { label: '首次参保', value: 'first_time' },
                { label: '续保', value: 'renewal' },
                { label: '转移', value: 'transfer' },
                { label: '补缴', value: 'makeup' }
              ]
            },
            {
              type: 'input',
              label: '原参保地',
              prop: 'previousLocation',
              placeholder: '请输入原参保地（如有）'
            },
            {
              type: 'upload',
              label: '身份证件',
              prop: 'idCardFiles',
              tip: '请上传身份证正反面扫描件（JPG/PNG格式）'
            }
          ],
          tips: [
            '请确保身份信息准确无误',
            '上传清晰的证件扫描件',
            '及时更新个人信息变更',
            '注意参保状态的选择'
          ]
        },
        {
          title: '参保方案',
          shortDesc: '选择参保方案',
          icon: 'el-icon-document',
          description: '设置参保方案和缴费标准',
          formItems: [
            {
              type: 'select',
              label: '参保地区',
              prop: 'insuranceArea',
              placeholder: '请选择参保地区',
              required: true,
              options: [
                { label: '深圳市', value: 'shenzhen' },
                { label: '广州市', value: 'guangzhou' },
                { label: '东莞市', value: 'dongguan' }
              ]
            },
            {
              type: 'select',
              label: '参保档次',
              prop: 'insuranceLevel',
              placeholder: '请选择参保档次',
              required: true,
              options: [
                { label: '一档（最低标准）', value: 'level_1' },
                { label: '二档（中等标准）', value: 'level_2' },
                { label: '三档（较高标准）', value: 'level_3' }
              ]
            },
            {
              type: 'input',
              inputType: 'number',
              label: '缴费基数',
              prop: 'baseAmount',
              placeholder: '请输入缴费基数',
              required: true,
              unit: '元'
            },
            {
              type: 'date',
              label: '起缴日期',
              prop: 'startDate',
              placeholder: '请选择起缴日期',
              required: true
            },
            {
              type: 'select',
              label: '缴费方式',
              prop: 'paymentMethod',
              placeholder: '请选择缴费方式',
              required: true,
              options: [
                { label: '月缴', value: 'monthly' },
                { label: '季缴', value: 'quarterly' },
                { label: '年缴', value: 'yearly' }
              ]
            },
            {
              type: 'select',
              label: '缴费比例',
              prop: 'paymentRatio',
              placeholder: '请选择缴费比例',
              required: true,
              options: [
                { label: '最低标准', value: 'minimum' },
                { label: '一般标准', value: 'normal' },
                { label: '最高标准', value: 'maximum' }
              ]
            },
            {
              type: 'textarea',
              label: '特殊说明',
              prop: 'specialNotes',
              placeholder: '请输入特殊情况说明',
              rows: 4
            }
          ],
          tips: [
            '缴费基数需符合当地规定',
            '注意选择正确的起缴日期',
            '关注缴费比例变动信息',
            '确认缴费方式是否适合'
          ]
        },
        {
          title: '材料准备',
          shortDesc: '准备办理材料',
          icon: 'el-icon-folder',
          description: '准备社保办理所需材料',
          formItems: [
            {
              type: 'upload',
              label: '劳动合同',
              prop: 'contractFile',
              tip: '请上传劳动合同扫描件（PDF格式）',
              required: true
            },
            {
              type: 'upload',
              label: '社保卡',
              prop: 'insuranceCard',
              tip: '请上传社保卡正反面扫描件（如有）'
            },
            {
              type: 'upload',
              label: '户口本',
              prop: 'householdRegister',
              tip: '请上传户口本相关页面扫描件'
            },
            {
              type: 'upload',
              label: '照片',
              prop: 'photo',
              tip: '请上传近期证件照（蓝底，2寸）'
            },
            {
              type: 'upload',
              label: '转移单',
              prop: 'transferForm',
              tip: '请上传社保关系转移单（如需）'
            },
            {
              type: 'upload',
              label: '其他材料',
              prop: 'otherFiles',
              tip: '请上传其他相关证明材料'
            },
            {
              type: 'textarea',
              label: '材料说明',
              prop: 'materialsNote',
              placeholder: '请输入材料相关补充说明',
              rows: 4
            }
          ],
          tips: [
            '确保所有材料清晰完整',
            '准备原件以供核验',
            '特殊情况需准备额外材料',
            '注意材料的有效期限'
          ]
        },
        {
          title: '审批确认',
          shortDesc: '审批流程',
          icon: 'el-icon-s-check',
          description: '社保办理审批流程',
          formItems: [
            {
              type: 'select',
              label: '审批人',
              prop: 'approvers',
              placeholder: '请选择审批人',
              required: true,
              multiple: true,
              options: [
                { label: '部门主管', value: 'department_supervisor' },
                { label: '人事主管', value: 'hr_supervisor' },
                { label: '财务主管', value: 'finance_supervisor' },
                { label: '总经理', value: 'general_manager' }
              ]
            },
            {
              type: 'select',
              label: '审批顺序',
              prop: 'approvalOrder',
              placeholder: '请选择审批顺序',
              required: true,
              options: [
                { label: '顺序审批', value: 'sequential' },
                { label: '并行审批', value: 'parallel' }
              ]
            },
            {
              type: 'date',
              label: '期望完成',
              prop: 'expectedDate',
              placeholder: '请选择期望完成日期'
            },
            {
              type: 'textarea',
              label: '申请说明',
              prop: 'applicationNote',
              placeholder: '请输入申请说明和补充信息',
              rows: 4
            },
            {
              type: 'select',
              label: '通知方式',
              prop: 'notificationMethod',
              placeholder: '请选择通知方式',
              multiple: true,
              options: [
                { label: '系统消息', value: 'system' },
                { label: '邮件通知', value: 'email' },
                { label: '短信通知', value: 'sms' }
              ]
            },
            {
              type: 'select',
              label: '紧急程度',
              prop: 'urgencyLevel',
              placeholder: '请选择紧急程度',
              options: [
                { label: '普通', value: 'normal' },
                { label: '紧急', value: 'urgent' },
                { label: '特急', value: 'very_urgent' }
              ]
            }
          ],
          tips: [
            '选择合适的审批人',
            '及时跟进审批进度',
            '准备完整的申请材料',
            '注意时间节点要求'
          ]
        }
      ]
    }
  },
  computed: {
    currentStepInfo() {
      return this.processSteps[this.currentStep]
    },
    canProceed() {
      return true // 实际应用中需要根据表单验证结果返回
    },
    format(percentage) {
      return percentage === 100 ? '完成' : `${percentage}%`
    }
  },
  methods: {
    goToStep(index) {
      if (index <= this.currentStep) {
        this.currentStep = index
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    },
    async nextStep() {
      try {
        await this.$refs.stepForm.validate()
        if (this.currentStep < this.processSteps.length - 1) {
          this.currentStep++
        } else {
          await this.completeProcess()
        }
      } catch (error) {
        this.$message.error('请正确填写所有必填项')
        return false
      }
    },
    async completeProcess() {
      this.submitting = true
      try {
        await new Promise(resolve => setTimeout(resolve, 1000))
        this.$message.success('社会保险办理流程已完成')
        this.$router.push('/main/process')
      } catch (error) {
        this.$message.error('提交失败，请重试')
      } finally {
        this.submitting = false
      }
    },
    handleFileChange(file, fileList) {
      const isValidFormat = (file.name.endsWith('.jpg') || 
                           file.name.endsWith('.png') || 
                           file.name.endsWith('.pdf') || 
                           file.name.endsWith('.doc') || 
                           file.name.endsWith('.docx'))
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isValidFormat) {
        this.$message.error('文件格式不正确！')
        return false
      }
      if (!isLt5M) {
        this.$message.error('文件大小不能超过 5MB！')
        return false
      }
      this.fileList = fileList.slice(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.insurance-process {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);

  .header {
    margin-bottom: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    
    .header-content {
      position: relative;
      text-align: center;

      .back-btn {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        text-decoration: none;
        color: #606266;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          color: #409EFF;
        }

        i {
          margin-right: 5px;
          font-size: 16px;
        }
      }

      .page-title {
        margin: 0;
        font-size: 24px;
        color: #303133;
        font-weight: 600;
      }

      .process-status {
        margin-top: 10px;
        
        .el-tag {
          margin: 0 5px;
        }
      }
    }
  }

  .process-timeline {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .process-content {
      margin-top: 30px;
    }
  }

  .step-form {
    max-width: 600px;
    margin: 0 auto;
  }

  .button-group {
    margin-top: 30px;
    text-align: center;

    .el-button {
      margin: 0 10px;
    }
  }
}
</style> 